<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrapTable测试</title>
    <!-- 样式 -->
    <link rel="stylesheet" href="/css/bootstrap-table1.12.1.min.css">
    <link rel="stylesheet" href="/css/all.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- js文件 -->
    <script src="/js/jquery-3.3.1.js"></script>
    <script src="/js/bootstrap-table1.12.1.min.js"></script>
    <!--popper.js必须在bootstrap.js之前引入进来，不然报错-->
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- 中文压缩包 -->
    <script src="/js/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div>
    <!--bootstraptable-->
    <table id="data-table"></table>
</div>
</body>
<script>
    $(function () {
        tableInit()
    })

    function tableInit() {
        $('#data-table').bootstrapTable({
            url: '/tableList',      //请求后台的URL（*）
            method: 'get',         //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortOrder: "asc",                   //排序方式
            responseHandler: function (res) {
                return res.content;
            },
            //传递参数（*）
            /*queryParams: function (params) {

                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                var temp = {
                    // rows: params.limit,                         //页面大小
                    // page: (params.offset / params.limit) + 1,   //页码
                    // sort: params.sort,      //排序列名
                    // sortOrder: params.order //排位命令（desc，asc）
                };
                return temp;
            },*/
            sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            // clickToSelect: true,                //是否启用点击选中行
            // height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                      //每一行的唯一标识，一般为主键列
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '学号',
                    align: 'center'
                }, {
                    field: 'name',
                    title: '姓名',
                    align: 'center'
                }, {
                    field: 'desc',
                    title: '自我描述',
                    align: 'center'
                }, {
                    field: 'age',
                    title: '年龄',
                    align: 'center'
                }, {
                    field: 'operation',
                    title: '操作',
                    align: 'center',
                    events: operateEvents,//给按钮注册事件
                    formatter: addFunctionAlty//表格中增加按钮
                }]
        })
    }

    // 修改按钮、删除按钮
    function addFunctionAlty(value, row, index) {
        return [
            '<button type="button" id="btn_edit" class="btn btn-default" data-toggle="modal" data-target="#ModalInfo">修改</button>  ',
            '<button id="btn_delete" class="btn btn-warning">删除</button>'
        ].join('');
    }

    window.operateEvents = {

        // 点击修改按钮执行的方法
        'click #btn_edit': function (e, value, row, index) {
            // 写自己的方法。。。
            alert(row.id);
        },
        // 点击删除按钮执行的方法
        'click #btn_delete': function (e, value, row, index) {
            // 写自己的方法。。。
            alert(row.id);
        }
    };
</script>
</html>